<template>
  <div class="container">
    <div>
      <input
          type="text"
          v-model="query"
          @keydown.enter="search(query)"
          placeholder="请输入查询关键字"
      />
    </div>
    <Charts ref="charts" :chartList="searchList"/>
  </div>
</template>

<script>
import Charts from "../components/Charts.vue";
import {entity} from "@/api/api";

export default {
  name: "KG",
  components: {
    Charts,
  },
  created() {
    let q = this.$route.query.query
    if (q !== undefined) {
      this.search(q)
    }
  },
  data() {
    return {
      query: "",
      searchList: [],
    };
  },
  methods: {
    async search(text) {
      // const f = [
      //   {
      //     "name": "瓜果蔬菜",
      //     "label": "类别",
      //     "id": 0,
      //     "children": [
      //       {
      //         "id": 130,
      //         "name": "乳瓜",
      //         "label": "作物",
      //         "relationship": "属于",
      //         "children": [
      //           {"id": 1114, "name": "乳瓜病毒病", "label": "病害", "relationship": "为害"}
      //         ]
      //       },
      //       {"id": 129, "name": "笋瓜", "label": "作物", "relationship": "属于"}
      //     ]
      //   }
      // ]
      // this.searchList = f
      try {
        // console.log(1111)
        let result = await entity({entity: text})
        this.searchList = [].concat(result.data);
        // const foo = await entity({entity: "乳瓜"})
        // this.searchList[0].children[0]['children'] = foo.data.children
        console.log(JSON.stringify(this.searchList))
      } catch (error) {
        alert("未查询到数据,请更改查询条件");
      }
    },
  },
};
</script>

<style scoped>
.container {
  position: relative;
  min-width: 1200px;
  margin: 0 auto;
  /* width: 85%; */
  background: ghostwhite url("../assets/bg.svg") no-repeat fixed center;
  text-align: center;
}

.container input {
  margin-top: 30px;
  height: 30px;
  width: 500px;
  padding: 6px 10px;
  line-height: 1.5;
  color: #555;
  border: 2px solid #555;
  border-radius: 24px;
  font-size: 16px;
  text-align: center;
}
</style>

